<template>
  <div>
    <!-- 账号绑定 -->
    <div class="bangding">
      <div class="huancun">账号绑定</div>
      <div class="san">
        <span class="iconfont icon-weixin"></span>
        <span class="iconfont icon-qq"></span>
        <span class="iconfont icon-shouji"></span>
        <span class="iconfont icon-youjiantou1"></span>
      </div>
    </div>
    <!-- 消息设置 -->
    <div class="xiaoxi">
      消息设置
      <span class="iconfont icon-youjiantou1"></span>
    </div>
    <!-- wifixia -->
    <div class="wifi">
      wifi下视频自动播放
      <span class="iconfont icon-youjiantou1"></span>
    </div>
    <!-- 清缓存 -->
    <div class="huancun">
      <span class="qingchu">我的主账号</span>
      <div class="nine1">
        <span class="nine">11.41MB</span>
        <span class="iconfont icon-youjiantou1"></span>
      </div>
    </div>
    <!-- 版本更新 -->
    <div class="banben" v-on:click="fun1()">
      版本更新
      <span class="iconfont icon-youjiantou1"></span>
    </div>
    <!-- 隐藏与安全 -->
    <div class="yinsi">
      <span class="yinsi1">隐私与安全政策</span>
      <div class="nine1">
        <span class="yinsi2">V4.4.3.0</span>
        <span class="iconfont icon-youjiantou1"></span>
      </div>
    </div>
    <!-- 个人信息查询 -->
    <div class="geren">
      个人信息查询
      <span class="iconfont icon-youjiantou1"></span>
    </div>
    <!--  退出-->
    <div class="tuichu" v-on:click="fun()">退出当前账号</div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("./Denglu");
    },
    fun1() {
      this.$router.push("/Nine");
    },
  },
};
</script>

<style scoped>
/* 账号绑定 */
.bangding {
  width: 100%;
  height: 00.3rem;
  /* background-color: rgb(70, 163, 163); */
  display: flex;
  justify-content: space-between;
  border-bottom: 0.05rem solid darkgray;
}
.huancun {
  width: 60%;
  height: 00.3rem;
  /* background-color: rgb(70, 163, 163); */
  display: flex;
  justify-content: space-between;
  line-height: 00.3rem;
  font-size: 0.18rem;
  font-weight: 500;
}
.san {
  display: flex;
  justify-content: space-between;
  width: 40%;
  height: 0.3rem;
  line-height: 00.3rem;
  font-size: 0.16rem;
}
/*  消息*/
.xiaoxi {
  width: 100%;
  height: 0.4rem;
  /* background-color: blue; */
  margin-top: 0.18rem;
  /* text-align: center; */
  line-height: 00.4rem;
  font-size: 0.18rem;
  font-weight: 600;
  /* border-top: .01rem solid darkgray; */
  border-bottom: 0.01rem solid darkgray;
}
.xiaoxi span {
  margin-left: 2.8rem;
}
/* wifi */
.wifi {
  width: 100%;
  height: 0.4rem;
  /* background-color: blue; */
  margin-top: 0.18rem;
  /* text-align: center; */
  line-height: 00.4rem;
  font-size: 0.18rem;
  font-weight: 600;
  /* border-top: .01rem solid darkgray; */
  border-bottom: 0.01rem solid darkgray;
}
.wifi span {
  margin-left: 1.95rem;
}
/* 缓存 */
.huancun {
  width: 100%;
  height: 00.3rem;
  /* background-color: blueviolet; */
  display: flex;
  justify-content: space-between;
}
.qingchu {
  font-size: 0.18rem;
}
.nine {
  font-size: 0.14rem;
  color: darkgray;
  line-height: 00.3rem;
  margin-right: 00.1rem;
}
/* 版本 */
.banben {
  width: 100%;
  height: 0.4rem;
  /* background-color: blue; */
  margin-top: 0.18rem;
  /* text-align: center; */
  line-height: 00.4rem;
  font-size: 0.18rem;
  font-weight: 600;
  /* border-top: .01rem solid darkgray; */
  border-bottom: 0.01rem solid darkgray;
}
.banben span {
  margin-left: 2.8rem;
}
/* 隐私与安全 */
.yinsi {
  width: 100%;
  height: 00.3rem;
  /* background-color: blueviolet; */
  display: flex;
  justify-content: space-between;
}
.yinsi1 {
  font-size: 0.18rem;
}
.yinsi2 {
  font-size: 0.14rem;
  color: darkgray;
  line-height: 00.3rem;
  margin-right: 00.1rem;
}
/* 个人信息 */
.geren {
  width: 100%;
  height: 0.4rem;
  /* background-color: blue; */
  margin-top: 0.18rem;
  /* text-align: center; */
  line-height: 00.4rem;
  font-size: 0.18rem;
  font-weight: 600;
  /* border-top: .01rem solid darkgray; */
  border-bottom: 0.01rem solid darkgray;
  margin-bottom: 00.3rem;
}
.geren span {
  margin-left: 2.4rem;
}
.tuichu {
  width: 100%;
  height: 0.5rem;
  background-color: coral;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 00.5rem;
  font-size: 0.2rem;
  font-weight: 700;
}
</style>